<template>
  <div class="box">测试</div>
  <button @click="test">测试</button>
</template>
<script>
import QueueTask from './class/queue.js'
import { ref, watch } from 'vue'
export default {
  data() {
    return {}
  },
  methods: {
    test() {
      let q = new QueueTask()
      q.doSome((next) => {
        console.log(`做了一些事情`)
        console.log(`3s后做下一件`)
        setTimeout(() => {
          next()
        }, 3e3)
      })
      q.doSome((next) => {
        console.log(`下一件事情`)
        next()
      })

      //这是错误用法
      /*
    setTimeout(() => {
      q.doSome((next) => {
        console.log(`做了另外一件事情3`)
        next()
      })
    }, 3e3)
    */

      //这是正确用法
      q.doSome((next) => {
        setTimeout(() => {
          console.log(`又过了3s`)
          next()
        }, 3e3)
      })
      q.doSome((next) => {
        console.log(`做了另外一件事情3`)
      })
    },
    test2() {
      let list = ref([])

      let q = new QueueTask()
      q.doSome((next) => {
        list.value.push(1)
        next()
      })
      q.doSome((next) => {
        list.value.push(2)
        //这里开始执行异步新队列
        let i = 0
        let tid = setInterval((res) => {
          list.value.push('2-' + i)
          i++
          if (i > 3) {
            clearInterval(tid)
            next()
          }
        }, 1e3)
      })

      q.doSome((next) => {
        list.value.push(3)
        next()
      })

      watch(
        list,
        (res) => {
          console.log(res)
        },
        {
          deep: true
        }
      )
    }
  },
  mounted() {
    this.test2()
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
